<template>
  <div>
    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color=white>
      <el-sub-menu :index="(index + 1).toString()" v-for="(item, index) in data" :key="index">
        <template #title>
          <el-icon><el-icon>
              <Pointer />
            </el-icon></el-icon>
          <span>{{ item.catagory }}</span>
        </template>

        <el-menu-item :index="((index + 1) + '-' + (i + 1)).toString" v-for="(list, i) in item.list" :key="i"
          @click="$emit('handle', list.cid)">{{ list.name }}</el-menu-item>

      </el-sub-menu>


    </el-menu>



  </div>
</template>
<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Pointer
} from '@element-plus/icons-vue'
import axios from 'axios';
import { onMounted, ref, toRaw } from 'vue';
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const data = ref([])
onMounted(() => {
  axios.get('/public/navlist.JSON').then((res) => {
    data.value = toRaw(res.data.navlist)
  })
})

</script>